<template>
  <footer
    class="mt-auto border-t transition-all duration-200"
    style="background-color: var(--bg-secondary); border-color: var(--border-primary)"
  >
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 关于工具 -->
        <div>
          <h3
            class="text-sm font-semibold mb-3 transition-colors duration-200"
            style="color: var(--text-primary)"
          >
            关于工具
          </h3>
          <p
            class="text-sm leading-relaxed transition-colors duration-200"
            style="color: var(--text-secondary)"
          >
            MCP JSON2TOML 是一个专业的在线转换工具，专门用于将 Model Context Protocol 配置文件从
            JSON 格式转换为 TOML 格式。支持 Windows 环境变量自动添加，确保 MCP 服务器在 Windows
            环境下正常运行。
          </p>
        </div>

        <!-- 功能特性 -->
        <div>
          <h3
            class="text-sm font-semibold mb-3 transition-colors duration-200"
            style="color: var(--text-primary)"
          >
            功能特性
          </h3>
          <ul
            class="text-sm space-y-2 transition-colors duration-200"
            style="color: var(--text-secondary)"
          >
            <li class="flex items-start">
              <svg
                class="w-4 h-4 mr-2 mt-0.5 shrink-0"
                style="color: var(--accent-500)"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 1.414L10.586 9.5H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>实时 JSON 到 TOML 转换</span>
            </li>
            <li class="flex items-start">
              <svg
                class="w-4 h-4 mr-2 mt-0.5 shrink-0"
                style="color: var(--accent-500)"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 1.414L10.586 9.5H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>可 Windows 环境变量自动添加</span>
            </li>
            <li class="flex items-start">
              <svg
                class="w-4 h-4 mr-2 mt-0.5 shrink-0"
                style="color: var(--accent-500)"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 1.414L10.586 9.5H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>一键复制转换结果</span>
            </li>
            <li class="flex items-start">
              <svg
                class="w-4 h-4 mr-2 mt-0.5 shrink-0"
                style="color: var(--accent-500)"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 1.414L10.586 9.5H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>预设配置示例</span>
            </li>
          </ul>
        </div>

        <!-- 相关链接 -->
        <div>
          <h3
            class="text-sm font-semibold mb-3 transition-colors duration-200"
            style="color: var(--text-primary)"
          >
            相关链接
          </h3>
          <div class="flex flex-col space-y-3">
            <a
              href="https://modelcontextprotocol.io"
              target="_blank"
              rel="noopener noreferrer"
              class="flex items-center text-sm transition-all duration-200 hover:translate-x-1 group"
              style="color: var(--text-link)"
            >
              <svg
                class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
                />
                <path
                  d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
                />
              </svg>
              <span class="group-hover:underline">MCP 官方文档</span>
            </a>
            <a
              href="https://toml.io"
              target="_blank"
              rel="noopener noreferrer"
              class="flex items-center text-sm transition-all duration-200 hover:translate-x-1 group"
              style="color: var(--text-link)"
            >
              <svg
                class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
                />
                <path
                  d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
                />
              </svg>
              <span class="group-hover:underline">TOML 规范</span>
            </a>
            <a
              href="https://gitee.com/xiaohanyes/mcp-json2toml.git"
              target="_blank"
              rel="noopener noreferrer"
              class="flex items-center text-sm transition-all duration-200 hover:translate-x-1 group"
              style="color: var(--text-link)"
            >
              <svg
                class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
                />
                <path
                  d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
                />
              </svg>
              <span class="group-hover:underline">Gitee 仓库</span>
            </a>
            <a
              href="https://gitee.com/xiaohanyes"
              class="flex items-center text-sm transition-all duration-200 hover:translate-x-1 group"
              style="color: var(--text-link)"
            >
              <svg
                class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
              </svg>
              <span class="group-hover:underline">联系我们</span>
            </a>
          </div>
        </div>
      </div>

      <div
        class="mt-8 pt-8 border-t transition-colors duration-200"
        style="border-color: var(--border-primary)"
      >
        <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
          <div class="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4">
            <p class="text-sm transition-colors duration-200" style="color: var(--text-tertiary)">
              © 2024 MCP JSON2TOML. 保留所有权利。
            </p>
          </div>

          <div class="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-6">
            <a
              href="#"
              class="text-sm transition-all duration-200 hover:underline"
              style="color: var(--text-tertiary)"
            >
              隐私政策
            </a>
            <a
              href="#"
              class="text-sm transition-all duration-200 hover:underline"
              style="color: var(--text-tertiary)"
            >
              使用条款
            </a>
            <a
              href="#"
              class="text-sm transition-all duration-200 hover:underline"
              style="color: var(--text-tertiary)"
            >
              Cookie 设置
            </a>
            <button
              @click="scrollToTop"
              class="p-2 rounded-md transition-all duration-200 hover:scale-110 hover:bg-gray-100 dark:hover:bg-gray-800"
              style="color: var(--text-tertiary)"
              aria-label="返回顶部"
            >
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fill-rule="evenodd"
                  d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
// 返回顶部功能
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}
</script>

<style scoped>
/* 组件特定样式已在 main.css 中定义 */

/* 链接悬停效果增强 */
a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-link);
  text-underline-offset: 2px;
}

/* 高对比度模式下的链接样式 */
@media (prefers-contrast: high) {
  a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  a:hover {
    text-decoration-thickness: 3px;
  }
}

/* 响应式优化 */
@media (max-width: 640px) {
  .grid {
    gap: 1.5rem;
  }

  .space-y-2 > li {
    padding-bottom: 0.25rem;
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  a,
  button,
  svg {
    transition: none !important;
  }

  .group:hover .group-hover\:translate-x-1 {
    transform: none !important;
  }

  .group:hover .group-hover\:scale-110 {
    transform: none !important;
  }
}
</style>
